<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link rel="icon" href="./layui/public/favicon.ico">
    <link href="./layui/css/layui.css" rel="stylesheet">
</head>
<body>
<style>
    .demo-reg-container {
        width: 320px;
        margin: 21px auto 0;
    }

    .demo-reg-other .layui-icon {
        position: relative;
        display: inline-block;
        margin: 0 2px;
        top: 2px;
        font-size: 26px;
    }
</style>
<form class="layui-form" lay-filter="regForm">
    <div class="demo-reg-container">
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input id="username" type="text" name="nickname" lay-verify="required" placeholder="用户名"
                       autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input id="password" type="password" name="password" lay-verify="required" placeholder="密码"
                       autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input id="ref_password" type="password" name="confirmPassword" lay-verify="required"
                       placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <input type="checkbox" checked="checked" name="agreement" lay-verify="required" lay-skin="primary"
                   title="同意">
            <a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
                <ins>用户协议</ins>
            </a>
        </div>
        <div class="layui-form-item">
            <!-- Use type="button" to prevent default form submission -->
            <button type="button" class="layui-btn layui-btn-fluid" lay-on="doRegister">注册</button>
        </div>
        <div class="layui-form-item demo-reg-other">
            <label>社交账号注册</label>
            <span style="padding: 0 21px 0 6px;">
                <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
            </span>
            <a href="/login.html">登录已有帐号</a>
        </div>
    </div>
</form>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'util'], function () {
        var jQuery = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;

        // 表单提交事件监听，用于验证两次密码是否一致
        form.on('submit(doRegister)', function (data) {
            var password = jQuery('#password').val();
            var ref_password = jQuery('#ref_password').val();
            if (password !== ref_password) {
                layer.msg("两次密码输入不一致");
                return false; // 阻止表单提交
            } else {
                layer.msg("密码一致，可以注册");
            }
            return false; // 阻止表单默认提交
        });

        // 注册按钮点击事件监听，用于发送注册请求
        util.on('lay-on', {
            'doRegister': function () {
                var password = jQuery('#password').val();
                var ref_password = jQuery('#ref_password').val();
                if (password !== ref_password) {
                    layer.msg("两次密码输入不一致");
                    return;
                }

                jQuery.ajax({
                    url: "/api/ai-cloud/v1/user/register",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({
                        "username": jQuery('#username').val(),
                        "password": jQuery('#password').val(),
                    }),
                    success: function (result) {
                        if (result != null && result.message != null) {
                            layer.msg(result.message);
                        } else {
                            layer.msg("注册成功!");
                            location.href = "/login.html";
                        }
                    }
                });
            }
        });
    });
</script>
</body>
</html>
